<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(243, 239, 8);
        }

        .anniu,
        .anniu::after {
            font-family: 'Do Hyeon', sans-serif;
            width: 260px;
            height: 80px;
            text-align: center;
            font-size: 22px;
            line-height: 80px;
            color: rgb(255, 251, 251);
            background: linear-gradient(30deg, transparent 10%, rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
            box-shadow: 5px 0 0 rgb(0, 204, 255);
            cursor: pointer;
            position: relative;
        }

        .anniu::after {
            content: 'Aurora Borealis night';
            position: absolute;
            top: 0;
            left: 0;
            text-shadow: -5px -2px 0 rgb(0, 183, 255),
                5px 2px 0 rgb(0, 255, 115);
            visibility: hidden;

        }

        .anniu:hover::after {
            animation: san 1s;
            animation-timing-function: steps(1, end);
        }

        /* 
       
       clip-path: inset(20% -5px  60%  0);
       clip-path: inset(50% -5px  30%  0);
       clip-path: inset(80% -5px  5%  0);
       clip-path: inset(0 -5px  80%  0);
       
       
        */
        @keyframes san {
            0% {
                clip-path: inset(20% -5px 60% 0);
                transform: translate(-6px, 5px);
                visibility: visible;
            }

            10% {
                clip-path: inset(50% -5px 30% 0);
                transform: translate(6px, -5px);
            }

            20% {
                clip-path: inset(20% -5px 60% 0);
                transform: translate(5px, 0px);

            }

            30% {
                clip-path: inset(80% -5px 5% 0);
                transform: translate(-8px, 5px);
            }

            40% {
                clip-path: inset(0 -5px 80% 0);
                transform: translate(-4px, -3px);

            }

            50% {
                clip-path: inset(50% -5px 30% 0);
                transform: translate(-6px, -5px);
            }

            60% {
                clip-path: inset(80% -5px 5% 0);
                transform: translate(-7px, 5px);

            }

            70% {
                clip-path: inset(0 -5px 80% 0);
                transform: translate(3px, 6px);
            }

            80% {
                clip-path: inset(50% -5px 30% 0);
                transform: translate(5px, 5px);

            }

            90% {
                clip-path: inset(20% -5px 60% 0);
                transform: translate(6px, -5px);

            }

            100% {
                clip-path: inset(0 -5px 80% 0);
                transform: translate(1px, 5px);
            }
        }
    </style>
</head>

<body>
    <div class="anniu">Aurora Borealis night</div>
</body>

</html>